<template>
    <Page class="wrap_page" :use-header="true" title="角色管理">
        <Edit ref="refEdit" :title="editDrawerTitle" />
        <a-card>
            <Query />
        </a-card>
        <a-card>
            <Operation @insert="handleInsert" style="margin-bottom: 16px" />
            <Table ref="refTable" @update="handleUpdate" />
        </a-card>
    </Page>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// Component
import Page from '@/component/layout/Page.vue';
import Edit from '@/component/sys/role/RoleEdit.vue';
import Query from '@/component/sys/role/RoleQuery.vue';
import Operation from '@/component/sys/role/RoleOperation.vue';
import Table from '@/component/sys/role/RoleTable.vue';

const refEdit = ref();
const refTable = ref();
const editDrawerTitle = ref<string>('');

onMounted(() => {
    init();
});

const init = () => {
    refTable.value.refresh();
};

const handleInsert = () => {
    editDrawerTitle.value = '新增角色';
    refEdit.value.open();
};

const handleUpdate = (id: string) => {
    editDrawerTitle.value = '修改角色';
    refEdit.value.open(id);
};
</script>

<style lang="less" scoped>
.wrap_page {
    .ant-card {
        margin-top: 24px;

        &:first-child {
            margin-top: 0;
        }
    }
}
</style>
